<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .el-header a{
            color: black;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="550px">
            <div style="margin: 0 auto;width: 1200px">
                <img src="img/logo.jpg"  alt="" style="vertical-align: middle">
                <a href="">首页</a><el-divider direction="vertical"></el-divider>
                <a href="">新闻列表</a><el-divider direction="vertical"></el-divider>
                <a href="">欠费查询</a><el-divider direction="vertical"></el-divider>
                <a href="">投诉信息</a><el-divider direction="vertical"></el-divider>
                <a href="">车位信息</a><el-divider direction="vertical"></el-divider>
                <a href="">联系我们</a>
                <!--轮播开始-->
                <div style="width: 1200px;margin: 0 auto">
                    <div style="background-color: #3b70c8;height: 20px"></div>
                    <template>
                        <el-carousel :interval="5000" arrow="always">
                            <el-carousel-item v-for="item in banner">
                                <img :src="item" width="100%">
                            </el-carousel-item>
                        </el-carousel>
                    </template>
                    <div style="background-color: #3b70c8;height: 20px"></div>
                </div>
                <!--轮播结束-->
                <!--搜索栏开始-->
                <div style="height: 50px;font-size: 20px;font-weight: bold">
                    <span style="color: red;line-height: 50px">
                        <img src="img/10.jpg" style="vertical-align: middle">
                        公告:欢迎光临汇福聚财物业管理有限公司网站，咨询热线望经理：00000000
                    </span>
                    <div style="float: right;position: relative;top: 6px;right: 40px">
                        <el-input type="text">
                            <!--在文本框中内嵌一个搜索按钮-->
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                    <div style="background-color: #3b70c8;height: 10px"></div>
                </div>
                <!--搜索栏结束-->
            </div>
        </el-header>
        <el-container style="width: 1200px;margin: 0 auto">
            <!--左侧开始-->
            <el-aside width="200px">
                <el-menu @select="handleSelect" :default-active="activeIndex1"
                         text-color="#3c3c3c" background-color="#D2E9FF">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-s-flag"></i>出售</template>
                        <el-menu-item index="1-1">上海</el-menu-item>
                        <el-menu-item index="1-2">北京</el-menu-item>
                        <el-menu-item index="1-3">杭州</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-picture"></i>出租</template>
                        <el-menu-item index="2-1">上海</el-menu-item>
                        <el-menu-item index="2-2">北京</el-menu-item>
                        <el-menu-item index="2-3">杭州</el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-shopping-cart-2"></i>转让</template>
                        <el-menu-item index="3-1">上海</el-menu-item>
                        <el-menu-item index="3-2">北京</el-menu-item>
                        <el-menu-item index="3-3">杭州</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <!--左侧结束-->
            <!--右侧-->
            <el-main>
                <!--出售  表格开始-->
                <el-table v-if="currentIndex=='1-1'"
                          :data="categoryArr"
                          style="width: 100%">
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column prop="a" label="区域"></el-table-column>
                    <el-table-column prop="p" label="价格"></el-table-column>
                    <el-table-column prop="m" label="面积"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="categoryDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table v-if="currentIndex=='1-2'"
                          :data="categoryArr1"
                          style="width: 100%">
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column prop="a" label="区域"></el-table-column>
                    <el-table-column prop="p" label="价格"></el-table-column>
                    <el-table-column prop="m" label="面积"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="categoryDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table v-if="currentIndex=='1-3'"
                          :data="categoryArr2"
                          style="width: 100%">
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column prop="a" label="区域"></el-table-column>
                    <el-table-column prop="p" label="价格"></el-table-column>
                    <el-table-column prop="m" label="面积"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="categoryDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分类结束-->
                <!--出租  轮播图表格开始-->
                <el-table v-if="currentIndex=='2-1'"
                          :data="bannerArr"
                          style="width: 100%">
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column prop="title" label="区域"></el-table-column>
                    <el-table-column prop="price" label="价格"></el-table-column>
                    <el-table-column prop="area" label="面积"></el-table-column>
                    <el-table-column label="轮播图" width="300">
                        <template slot-scope="scope">
                            <img :src="scope.row.url" width="100%">
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="bannerDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table v-if="currentIndex=='2-2'"
                          :data="bannerArr2"
                          style="width: 100%">
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column prop="title" label="区域"></el-table-column>
                    <el-table-column prop="price" label="价格"></el-table-column>
                    <el-table-column prop="area" label="面积"></el-table-column>
                    <el-table-column label="轮播图" width="300">
                        <template slot-scope="scope">
                            <img :src="scope.row.url" width="100%">
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="bannerDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table v-if="currentIndex=='2-3'"
                          :data="bannerArr3"
                          style="width: 100%">
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column prop="title" label="区域"></el-table-column>
                    <el-table-column prop="price" label="价格"></el-table-column>
                    <el-table-column prop="area" label="面积"></el-table-column>
                    <el-table-column label="轮播图" width="300">
                        <template slot-scope="scope">
                            <img :src="scope.row.url" width="100%">
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="bannerDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--出租 轮播图表格结束-->
                <!--商品表格开始-->
                <!--<el-table v-if="currentIndex=='3-1'"
                          :data="productArr"
                          style="width: 100%">
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column prop="title" label="区域"></el-table-column>
                    <el-table-column prop="price" label="价格"></el-table-column>
                    <el-table-column prop="area" label="面积"></el-table-column>
                    &lt;!&ndash;prop=property属性 设置当前列显示的文本内容为对象的xxx属性&ndash;&gt;
                    <el-table-column label="商品图片" width="80">
                        <template slot-scope="scope">
                            <img :src="scope.row.url" width="100%">
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        &lt;!&ndash;scope定义的一个变量名, 里面包含当前行的信息
                        scope.$index得到当前行的下标
                        scope.row 得到当前行对应数组里面的对象
                        &ndash;&gt;
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="productDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>-->
                <!--商品表格结束-->
                <!--转让部分开始-->
<!--                <el-table v-if="currentIndex='3-1'" :data="imgArr">-->
<!--                <div >-->
<!--                    <div>-->
<!--                    <p>泰然家用立体车库是指可以安装在地面或地下室的停车场，-->
<!--                        单个车位也能单独安装，长排车位也能安装，家用立体车库是小区或别墅区停车位非常紧缺的解决方案，可以高效运用建筑面积，-->
<!--                        轻松解决停车难问题。泰然智能车位租赁公司专注于生产家用立体车库设备，从业多年，质量有保障，诚实守信！咨询热线：138-8991-3356。-->
<!--                    </p>-->
<!--                    </div>-->
<!--                </div>-->
<!--                </el-table>-->
                <!--转让部分结束-->
            </el-main>
            <!--右侧-->
        </el-container>
    </el-container>
</div>
</body>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                banner:["img/7.jpg","img/8.jpg","img/9.jpg"],
                currentIndex:"1-1",
                categoryArr:[{id:1,a:"1小区",p:"5000",m:"50㎡"},{id:1,a:"XX小区",p:"5000",m:"50㎡"},
                    {id:1,a:"XX小区",p:"5000",m:"50㎡"},
                    {id:1,a:"XX小区",p:"5000",m:"50㎡"},
                    {id:1,a:"XX小区",p:"5000",m:"50㎡"},
                    {id:1,a:"XX小区",p:"5000",m:"50㎡"}],
                categoryArr1:[{id:1,a:"2小区",p:"5000",m:"50㎡"},{id:1,a:"XX小区",p:"5000",m:"50㎡"},
                    {id:1,a:"XX小区",p:"5000",m:"50㎡"},
                    {id:1,a:"XX小区",p:"5000",m:"50㎡"},
                    {id:1,a:"XX小区",p:"5000",m:"50㎡"},
                    {id:1,a:"XX小区",p:"5000",m:"50㎡"}],
                categoryArr2:[{id:1,a:"3小区",p:"5000",m:"50㎡"},{id:1,a:"XX小区",p:"5000",m:"50㎡"},
                    {id:1,a:"XX小区",p:"5000",m:"50㎡"},
                    {id:1,a:"XX小区",p:"5000",m:"50㎡"},
                    {id:1,a:"XX小区",p:"5000",m:"50㎡"},
                    {id:1,a:"XX小区",p:"5000",m:"50㎡"}],
                bannerArr:[{id:1,title:"小区1",price:"5000",area:"30平方米",url:"img/11.jpg"},
                    {id:2,title:"小区2",price:"8000",area:"30平方米",url:"img/12.jpg"},
                    {id:3,title:"小区3",price:"6000",area:"30平方米",url:"img/13.jpg"}],
                bannerArr2:[{id:1,title:"小区4",price:"5000",area:"30平方米",url:"img/11.jpg"},
                    {id:2,title:"小区5",price:"8000",area:"30平方米",url:"img/12.jpg"},
                    {id:3,title:"小区6",price:"6000",area:"30平方米",url:"img/13.jpg"}],
                bannerArr3:[{id:1,title:"小区7",price:"5000",area:"30平方米",url:"img/11.jpg"},
                    {id:2,title:"小区8",price:"8000",area:"30平方米",url:"img/12.jpg"},
                    {id:3,title:"小区9",price:"6000",area:"30平方米",url:"img/13.jpg"}],
                productArr:[{}],
                activeIndex1:'1',
                imgArr:[]
            }
        },
        methods:{
            categoryDelete(i,c){
                v.categoryArr.splice(i,1);
                v.$message.success("成功删除"+c.a+"分类!");
            },
            bannerDelete(i,b){
                v.bannerArr.splice(i,1);
                v.$message.success("删除成功!");
            },
            productDelete(i,p){
                v.productArr.splice(i,1);
                v.$message.success("删除成功!");
            },
            handleSelect(key,keyPath){
                //记录当前用户点击的导航菜单的位置
                v.currentIndex = key;
                /*if (key=='1-2'){
                    v.$message.success("添加分类");
                }else if(key=='2-2'){
                    location.href="";
                }else if(key=='3-2'){
                    location.href="";
                }else{
                    v.currentIndex = key;
                }*/

            }
        }
    })
</script>
</html>